<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>乐鲜生活后台管理系统</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/admin-lte/2.4.3/css/AdminLTE.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/admin-lte/2.4.3/css/skins/_all-skins.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/admin-lte/2.4.3/js/adminlte.min.js"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="css/index/index.css" />
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
  <script src="../resource/ply/Ply.min.js"></script>
  <link rel="stylesheet" href="../resource/ply/ply.css">
</head>

<body class="skin-purple">
  <!-- Main Header -->
  <header id="app-header">
    <component-header></component-header>
  </header>

  <script src="../js/header.js"></script>

  <aside id="app-sidebar">
    <component-sidebar></component-sidebar>
  </aside>

  <script src="../js/sidebar.js"></script>

  <div id="users">
    <component-content title="会员中心">
      <div class="callout callout-info">
        <h4>提示!</h4>

        <p>提下给出了所有会员的信息，只有超级管理员可以删除会员和修改会员信息</p>
      </div>
      <component-box class="box-solid box-primary" title="所有会员信息">
        <div class="col-sm-12 dataTables_wrapper form-inline dt-bootstrap">
          <div class="row">
            <div class="col-sm-2">
              <button class="btn btn-block btn-primary" type="button" @click="addItem" :disabled="isAdding">添加会员</button>
            </div>
            <div class="col-sm-8"></div>
            <div class="col-sm-2">
              <div class="input-group row  pull-right">
                <input type="text" class="form-control" placeholder="搜索..." v-model="currentSearchPattern">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button" @click="performSearch" :disabled="isSearching">
                    <i class="fa fa-search"></i>
                  </button>
                </span>
              </div>
            </div>
          </div>
          <table class="table table-striped table-hover dataTable">
            <thead>
              <th class="sorting_asc col-sm-2 text-center" tableindex="0" rowspan="1" colspan="1" aria-sort="ascending">
                <h4 style="font-weight: bold">会员头像</h4>
              </th>
              <th class="sorting_asc col-sm-3 text-center" tableindex="0" rowspan="1" colspan="1" aria-sort="ascending">
                <h4 style="font-weight: bold">会员昵称</h4>
              </th>
              <th class="sorting_asc col-sm-1 text-center" tableindex="0" rowspan="1" colspan="1" aria-sort="ascending">
                <h4 style="font-weight: bold">会员性别</h4>
              </th>
              <th class="sorting_asc col-sm-3 text-center" tableindex="0" rowspan="1" colspan="1" aria-sort="ascending">
                <h4 style="font-weight: bold">联系电话</h4>
              </th>
              <th class="sorting_asc col-sm-1 text-center" tableindex="0" rowspan="1" colspan="1" aria-sort="ascending">
                <h4 style="font-weight: bold">是否激活</h4>
              </th>
              <th class="sorting_asc col-sm-2 text-center" tableindex="0" rowspan="1" colspan="1" aria-sort="ascending">
                <h4 style="font-weight: bold">操作区域</h4>
              </th>
            </thead>
            <tbody>
              <tr role="row" v-for="(user, index) in users">
                <td class="col-sm-2 clearfix" v-if="!isModifying[index]">
                  <image style="width: 64px; height: 64px" class="img-circle img-responsive center-block" :src="getUserProfile(user)"></image>
                </td>
                <td v-if="isModifying[index]">
                  <input type="text" class="col-sm-2 text-center form-control" v-model="user.profile">
                </td>
                <td class="col-sm-3 text-center clearfix" v-if="!isModifying[index]">
                  <h5 class="clearfix">{{user.nickname}}</h5>
                </td>
                <td v-if="isModifying[index]">
                    <input type="text" class="col-sm-3 text-center form-control" v-model="user.nickname">
                </td>
                <td class="col-sm-1 text-center clearfix" v-if="!isModifying[index]">
                  <h5>{{user.gender}}</h5>
                </td>
                <td v-if="isModifying[index]">
                  <input type="text" class="col-sm-1 text-center form-control" style="width: 100px" v-model="user.gender">
                </td>
                <td class="col-sm-3 text-center clearfix" v-if="!isModifying[index]">
                  <h5>{{user.phone}}</h5>
                </td>
                <td v-if="isModifying[index]">
                    <input type="text" class="col-sm-3 text-center form-control" v-model="user.phone">
                </td>
                <td class="col-sm-1 text-center clearfix" v-if="!isModifying[index]">
                  <h5>{{user.active}}</h5>
                </td>
                <td v-if="isModifying[index]">
                    <input type="text" class="col-sm-1 text-center form-control" style="width: 100px" v-model="user.active">
                </td>
                <td class="col-sm-2 row clearfix text-center">
                  <button v-if="!isModifying[index]" type="button" class="btn btn-lg btn-primary btn-sm" @click="modifyItem(index)">修改</button>
                  <button v-if="isModifying[index]" type="button" class="btn btn-lg btn-success btn-sm" @click="submitItem(index)">提交</button>
                  <button v-if="user.active==='是'" type="button" class="btn btn-lg btn-danger btn-sm" @click="freezeItem(index)">冻结</button>
                  <button v-if="!(user.active==='是')" type="button" class="btn btn-lg btn-danger btn-sm" @click="unfreezeItem(index)">解冻</button>
                  <button type="button" class="btn btn-lg btn-danger btn-sm" @click="deleteItem(index)">删除</button>
                </td>
              </tr>
            </tbody>

          </table>
      </component-box>
      <script src="../js/box.js"></script>

    </component-content>
    <script src="../js/content.js"></script>
    </div>

    <script src="../js/userManager.js"></script>

</body>

</html>